<template>
  <div>
    <div class="query-form">
      <a-form ref="queryFormRef" :model="queryForm" layout="inline" @submit="handleQuery">
        <a-form-item field="menuName" label="菜单名称">
          <a-input v-model="queryForm.menuName" placeholder="请输入菜单名称" />
        </a-form-item>
        <a-form-item field="menuState" label="状态">
          <a-select v-model="queryForm.menuState" placeholder="请选择状态" :style="{width:'150px'}">
            <a-option :value="0" label="停用"></a-option>
            <a-option :value="1" label="启用"></a-option>
          </a-select>
        </a-form-item>
        <a-form-item class="operate">
          <a-button type="primary" html-type="submit">查询</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
    <div class="operate-wrapper">
      <a-button type="primary" status="success" @click="openAddModal">添加</a-button>
    </div>
    <a-table :data="tableData" row-key="_id">
      <template #columns>
        <a-table-column title="菜单名称" data-index="menuName"></a-table-column>
        <a-table-column title="图标" data-index="icon"></a-table-column>
        <a-table-column title="菜单类型" data-index="menuType"></a-table-column>
        <a-table-column title="权限标识" data-index="menuCode"></a-table-column>
        <a-table-column title="路由地址" data-index="path"></a-table-column>
        <a-table-column title="组件地址" data-index="component"></a-table-column>
        <a-table-column title="菜单状态" data-index="menuState"></a-table-column>
        <a-table-column title="创建时间" data-index="createTime"></a-table-column>
        <a-table-column title="操作">
          <template #cell="{ record }">
            <a-button type="text" @click="openUptModal(record)">编辑</a-button>
            <a-button type="text" @click="handleDelete(record)">删除</a-button>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <!-- 添加/编辑弹窗 -->
    <a-modal :visible="modalVisible" title="添加/编辑菜单" @ok="handleAddOrUpt" @cancel="closeAddModal">
      <a-form ref="modalFormRef" :model="modalForm" :rules="modalFormRules">
        <a-form-item field="parentId" label="父级菜单">
          <a-cascader
            v-model="modalForm.parentId"
            :options="cascaderOptions"
            placeholder="请选择父级菜单"
            check-strictly
          />
          <span class="tip">不选，则直接创建一级菜单</span>
        </a-form-item>
        <a-form-item field="menuType" label="菜单类型">
          <a-radio-group v-model="modalForm.menuType">
            <a-radio :value="1">菜单</a-radio>
            <a-radio :value="2">按钮</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="menuName" label="菜单名称">
          <a-input v-model="modalForm.menuName" placeholder="请输入菜单名称" />
        </a-form-item>
        <a-form-item v-if="modalForm.menuType == 1" field="icon" label="菜单图标">
          <a-input v-model="modalForm.icon" placeholder="请输入菜单图标" />
        </a-form-item>
        <a-form-item v-if="modalForm.menuType == 1" field="path" label="路由地址">
          <a-input v-model="modalForm.path" placeholder="请输入路由地址" />
        </a-form-item>
        <a-form-item v-if="modalForm.menuType == 1" field="component" label="组件地址">
          <a-input v-model="modalForm.component" placeholder="请输入组件地址" />
        </a-form-item>
        <a-form-item v-if="modalForm.menuType == 1" field="menuState" label="菜单状态">
          <a-radio-group v-model="modalForm.menuState">
            <a-radio :value="1">启用</a-radio>
            <a-radio :value="0">停用</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item v-if="modalForm.menuType == 2" field="menuCode" label="权限标识">
          <a-input v-model="modalForm.menuCode" placeholder="请输入权限标识" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { menuAdd, menuDelete, menuUpdate, menuList } from "@/api/menu/index.js";
import { reactive, ref, onMounted } from "vue";
import { Modal } from "@arco-design/web-vue";

export default {
  setup() {
    onMounted(() => {
      getMenuList();
    });
    // 条件查询表单
    const queryForm = reactive({
      menuName: "",
      menuState: ""
    });
    const queryFormRef = ref(null);
    const handleQuery = values => {
      console.log("values", values);
      getMenuList();
    };
    const handleReset = () => {
      queryFormRef.value.resetFields();
      getMenuList();
    };
    // 添加/编辑角色弹窗
    const modalVisible = ref(false);
    const modalFormRef = ref(null);
    let modalForm = reactive({
      parentId: [null],
      menuType: 1,
      menuName: "",
      icon: "",
      path: "",
      component: "",
      menuState: 1,
      menuCode: ""
    });
    const modalFormRules = reactive({
      menuName: { required: true, message: "menuName is required" }
    });
    const action = ref("add");
    const closeAddModal = () => {
      modalVisible.value = false;
      modalFormRef.value.resetFields();
    };
    // 添加
    const openAddModal = () => {
      action.value = "add";
      modalFormRef.value.resetFields();
      modalVisible.value = true;
    };
    // 更新
    const openUptModal = record => {
      action.value = "upt";
      Object.assign(modalForm, record);
      modalVisible.value = true;
    };
    const handleAddOrUpt = () => {
      modalFormRef.value.validate(async (errors, Record) => {
        if (errors) return;
        if (action.value == "add") {
          const { data } = await menuAdd(modalForm);
          console.log("data", data);
        }
        if (action.value == "upt") {
          const { data } = await menuUpdate(modalForm);
          console.log("data", data);
        }
        getMenuList();
        modalVisible.value = false;
      });
    };

    // 表格数据
    let tableData = ref([]);
    const cascaderOptions = ref([]);
    const getMenuList = async () => {
      const { data } = await menuList(queryForm);
      tableData.value = data.data;
      cascaderOptions.value = handleCascader(tableData.value);
    };

    // 递归处理级联选择器数据
    const handleCascader = list => {
      let outupt = [];
      list.map(item => {
        item.value = item._id;
        item.label = item.menuName;
        outupt.push(item);
        if (item.children) {
          handleCascader(item.children);
        }
      });
      return outupt;
    };

    // 删除
    const handleDelete = record => {
      Modal.warning({
        title: "警告",
        content: "此操作将停用该用户，是否继续！",
        hideCancel: false,
        onOk: async () => {
          const { data } = await menuDelete({
            _id: record._id
          });
          console.log(data);
          getMenuList();
        }
      });
    };
    return {
      queryForm,
      handleReset,
      queryFormRef,
      modalVisible,
      modalForm,
      action,
      modalFormRules,
      tableData,
      cascaderOptions,
      handleCascader,
      getMenuList,
      handleQuery,
      openAddModal,
      closeAddModal,
      handleAddOrUpt,
      modalFormRef,
      openUptModal,
      handleDelete
    };
  }
};
</script>

<style lang="scss" scoped>
.tip {
  display: inline-block;
  width: 300px;
  font-size: 12px;
  margin-left: 10px;
  color: #666;
}
</style>